<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="user" value="${sessionScope.user}"/>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!doctype html>
<html>

<head>
    <title>下订单</title>
    <!--CSS styles-->
    <link rel="stylesheet" media="all" href="${path}/pet/home/css/nav.css" />
    <link type="text/css" rel="stylesheet" href="${path}/pet/shoppingcart/css/style.css" />
    <!--JS files-->
    <script src="${path}/pet/home/js/jquery.min.js"></script>
</head>

<body>
<!----------- 导航 --------------------------------------------------------------------------->
<nav class="navbar-fixed">
    <div class="container">
        <div class="navigation navigation-main">
            <a href="" class="logo"><img src="${path}/pet/home/assets/images/logo.jpg" alt="" /></a>
            <a href="#" class="open-menu"><i class="icon icon-menu"></i></a>
            <div class="floating-menu">
                <div class="close-menu-wrapper">
                    <span class="close-menu"><i class="icon icon-cross"></i></span>
                </div>
                <ul>
                    <li id="exitlogin4"><a>退出登录</a></li>
                    <li><a href="${path}/home">首页</a></li>
                    <li><a href="${path}/chat">社交<span id="badge"></span></a></li>
                    <li><a href="${path}/chat?role=kf">客服</a></li>
                    <li><a href="${path}/myOrders">订单</a></li>
                    <li><a href="${path}/myAccount">我的</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<section class="main-header" style="background-image:url(${path}/pet/home/assets/images/gallery-3.jpg)">
    <header>
        <div class="container">
            <h1 class="h2 title">宠物医疗保险-确认订单信息</h1>
        </div>
    </header>
</section>

<!------------------------ 产品选择的规格 --------------------------------------------------->
<div class="container checkout-box">
    <form>
        <div id="checkoutGoodsList" class="checkout-goods-box">
            <dl class="checkout-goods-list">
                <dt class="clearfix">
                    <span class="col col-1">商品名称</span>
                    <span class="col col-3" >开始日期</span>
                    <span class="col col-3" >投保人</span>
                    <span class="col col-3" >受保人</span>
                    <span class="col col-3" >受保动物</span>
                </dt>
                <dd class="item clearfix">
                    <div class="item-row">
                        <div class="col col-1">
                            <div id="detailImg" class="g-pic" style="padding-right: 100px;">
                                <%--<img src="${path}/backstage/images/'+result[key].picUrl+'" width="40" height="40"/>--%>
                            </div>
                            <div class="g-info" id="itemName" style="width: 130px;"></div>
                        </div>
                        <div class="col col-2" id="click_Buyer" style="width: 130px;"></div>
                        <div class="col col-2" id="click_animal" style="width: 130px;"></div>
                        <div class="col col-2" id="click_people" style="width: 130px;"></div>
                        <div class="col col-2" id="date" style="width: 130px;"></div>
                    </div>
                </dd>
            </dl>
        </div>
        <div class="checkout-confirm">
            <p class="checkout-total">应付总额：
                <span class="totalprice"></span>
            </p>
            <div id="button_main">
                <%--<a href="#" class="btn btn-primary" id="test">支付</a>--%>
                <a class="btn btn-primary" id="cancel">取消订单</a>
                <a href="${path}/productDetail?id=${param.itemID}" class="btn btn-primary ">返回产品</a>
                <a href="javascript:void(0)" onClick="dashangToggle()" class="btn btn-primary" id="pay">支付</a>
            </div>
        </div>
    </form>
    <table class="table">
        <tbody>
        <tr><td colspan="5" style="text-align: center;">投保人</td></tr>
        <tr>
            <th>用户名</th>
            <th>证件号</th>
            <th>手机号码</th>
            <th>身份</th>
        </tr>
        <tr id="itemBuyer"></tr>
            <tr><td colspan="5" style="text-align: center;">受保人</td></tr>
            <tr>
                <th>用户名</th>
                <th>证件号</th>
                <th>手机号码</th>
                <th>关系</th>
            </tr>
            <tr id="itemRelative"></tr>
            <tr><td colspan="5" style="text-align: center;">受保宠物</td></tr>
            <tr>
                <th>姓名</th>
                <th>出生日期</th>
                <th>品种</th>
                <th>是否节育</th>
            </tr>
            <tr id="itemPet"></tr>
        </tbody>
    </table>
</div>
<!-- 支付 -->
<div>
    <div class="hide_box"></div>
    <div class="shang_box">
        <a class="shang_close" href="javascript:void(0)" onClick="dashangToggle()" title="关闭">
            <img src="${path}/pet/shoppingcart/images/img/close.jpg" alt="取消" />
        </a>
        <div class="shang_tit">
            <p>请选择支付方式</p>
        </div>
        <div class="shang_payimg">
            <img src="${path}/pet/shoppingcart/images/img/alipayimg.jpg" title="扫一扫" />
        </div>
        <div class="pay_explain"><button id="pay_complete">我已支付</button></div>
        <div class="shang_payselect">
            <div class="pay_item checked" data-id="alipay">
                <span class="radiobox"></span>
                <span class="pay_logo"><img src="${path}/pet/shoppingcart/images/img/alipay.jpg" alt="支付宝" /></span>
            </div>
            <div class="pay_item" data-id="weipay">
                <span class="radiobox"></span>
                <span class="pay_logo"><img src="${path}/pet/shoppingcart/images/img/wechat.jpg" alt="微信" /></span>
            </div>
        </div>
        <div class="shang_info">
            <p>打开<span id="shang_pay_txt">支付宝</span>扫一扫</p>
        </div>
    </div>
</div>
<script type="text/javascript">
    function dashangToggle() {
        $(".hide_box").fadeToggle();
        $(".shang_box").fadeToggle();
    }

    $(function() {
        var user="<%=session.getAttribute("user")%>";
        var billID = ${param.billID};     //订单id
        var uid = ${user.id};             //获取url上面的用户id
        var couponID = ${param.couponID};
        var itemId = ${param.itemID};

        //退出登录
        $("#exitlogin4").click(function(){
            var username = "${user.username}";
            $.ajax({
                type: 'POST',
                url: '/user/logout',
                dataType: "json",
                data: {username:username},
                error: function () {
                    console.log("失败");
                },
                success: function (data) {
                    alert("已退出账号，如有需要，请重新登录");
                    window.location.href = '${path}/home';
                }
            });
        });

        //消息轮询
        $.ajax({
            url: '/message/longSearch',
            data: {uid:uid},
            dataType:'json',
            type: 'POST',
            success: function (result) {
                var num = result.好友请求的数目 + result.好友拒绝的数目 +result.未读消息数目;
                $("#badge").html(num);
            }
        });
        setInterval(function(){
            $.ajax({
                url: '/message/longSearch',
                data: {uid:uid},
                dataType:'json',
                type: 'POST',
                success: function (result) {
                    var num = result.好友请求的数目 + result.好友拒绝的数目 +result.未读消息数目;
                    $("#badge").html(num);
                }
            });
        }, 5000);

        //时间戳转换为时间
        function timestampToTime(timestamp) {
            var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = date.getDate() + ' ';
            var h = date.getHours() + ':';
            var m = date.getMinutes() + ':';
            var s = date.getSeconds();
            return Y+M+D+h+m+s;
        }


        //根据订单id获取订单信息
        $.ajax({
            type: 'POST',
            url: '/bill/selectByBillId',
            dataType : "json",
            data:{billId:${param.billID}},
            error: function () {
                console.log("失败");
            },
            success: function (result) {
                var str ="";
                var str0 ="";
                var str1 ="";
                var str2 ="";
                var str3 = "";
                var str4 = "";
                var str5 = "";
                var str6 ="";
                var str7 = "";
                var str8 = "";
                var i=0;
                for(var key in result){
                    console.log(result[key]);
                    str += '<div>'+ timestampToTime(result[key].createDate) +'</div>';
                    str0 += '<a href="#">'+ result[key].item.itemName +'</a>';
                    str1 +='<span>'+ result[key].insured.name +'</span>';
                    str2 +='<span>'+ result[key].pet.name +'</span>';
                    str7 += '<span style="float: left;">投保人</span>';
                    str3 +='<img src="${path}/backstage/images/'+result[key].item.picUrl+'" style="width: 300%;"/>';
                    str4 += '<td>'+ result[key].insured.name +'</td>';
                    str4 += '<td>'+ result[key].insured.identity +'</td>';
                    str4 += '<td>'+ result[key].insured.phone +'</td>';
                    str4 += '<td>'+ result[key].insured.relation +'</td>';
                    str5 += '<td>'+ result[key].pet.name +'</td>';
                    str5 += '<td>'+ timestampToTime(result[key].pet.birthday) +'</td>';
                    str5 += '<td>'+ result[key].pet.species +'</td>';
                    str5 += '<td>'+ result[key].pet.birthControl +'</td>';
                    str6 += '<td>投保人姓名</td>';
                    str6 += '<td>投保人证件号</td>';
                    str6 += '<td>投保人手机号</td>';
                    str6 += '<td>投保人身份</td>';
                    str8 ='<strong id="totalPrice">'+ result[key].price +'</strong>元';
                }
                $('#itemName').html(str0);
                $('#date').html(str);
                $('#click_people').html(str1);
                $('#click_animal').html(str2);
                $('#click_Buyer').html(str7);
                $('#detailImg').html(str3);
                $('#itemBuyer').html(str6);
                $('#itemRelative').html(str4);
                $('#itemPet').html(str5);
                $('.totalprice').html(str8);
            }
        });

        //取消订单
        $("#cancel").click(function() {
            if(confirm('确定要取消订单吗?')) {
                $('#button_main').html();
                $.ajax({
                    type: 'POST',
                    url: '/bill/delete',
                    dataType: "json",
                    data: {billId:billID},
                    error: function () {
                        console.log("失败");
                    },
                    success: function (result) {
                        var str="";
                        str += '<p style="display: inline-block;">订单已取消</p>';
                        str += '<a href="${path}/productDetail?itemID='+ ${param.itemID} +'" class="btn btn-primary ">返回产品</a>';
                        $('#button_main').html(str);
                    }
                });
                return true;
            }
            return false;
        });

        //弹出支付框
        $(".pay_item").click(function() {
            $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
            var dataid = $(this).attr('data-id');
            $(".shang_payimg img").attr("src", "${path}/pet/shoppingcart/images/img/" + dataid + "img.jpg");
            $("#shang_pay_txt").text(dataid == "alipay" ? "支付宝" : "微信");
        });

        //支付
        $("#pay_complete").click(function() {
            $.ajax({
                type: 'POST',
                url: 'bill/pay',
                dataType: "json",
                data: {billId:billID,uid:uid},
                error: function () {
                    console.log("失败");
                },
                success: function (data) {
                    alert("支付成功");
                    window.location.href = '${path}/buySuccess?billID='+ billID +'';
                }
            });
        });
    });
</script>
</body>
<style>
    #badge {
        padding: 2px 5px;  /* 不需要定义height与width，添加合适的padding使圆圈随字符长短变化而改变 */
        line-height: 20px;
        text-align: center;
        background-color: red;
        color: white;
        font-size: 12px;
        font-weight: 700;
        border-radius: 50%;
        /*position: relative;*/
        /*bottom: 45px;*/
        /*left: -20px;*/
    }

    /*给表格设置属性*/
    .table {
        /*width: 700px;*/
        border-collapse: collapse;
        width: 100%;
        margin-top: 20px;
    }

    /*设置表格的td,th */
    .table td,
    th {
        border: 1px solid black;
        width: 26%;
        text-align: center;
    }

    .sj {
        width: 70px;
        text-align: center;
        /*字体居中*/
    }

    caption {
        padding-top: .75rem;
        padding-bottom: .75rem;
        color: #6c757d;
        /*background: #f5f5f5;*/
        text-align: center;
        caption-side: top;
        font-size: 20px;
    }
    tr {
        line-height: 40px;
    }
</style>
</html>